<template>
    <div class="modal-overlay" @click.self="$emit('close')">
      <div class="modal-content">
        <h3>编辑任务</h3>
        <input
          v-model="editText"
          @keyup.enter="$emit('save', editText)"
          class="edit-input"
          ref="inputRef"
        />
        <div class="modal-actions">
          <button @click="$emit('save', editText)" class="save-btn">保存</button>
          <button @click="$emit('close')" class="cancel-btn">取消</button>
        </div>
      </div>
    </div>
  </template>

<script>
export default {
  name: 'TodoModal',
  props: {
    todo: Object
  },
  data() {
    return {
      editText: this.todo.text,
      show: true
    }
  },
  mounted() {
    this.$refs.input.focus()
  }
}
</script>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  
  const props = defineProps({
    todo: Object
  })
  
  const emit = defineEmits(['save', 'close'])
  const editText = ref(props.todo.text)
  const inputRef = ref(null)
  
  onMounted(() => {
    inputRef.value.focus()
  })
  </script>
  
  <style scoped>
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }
  
  .modal-content {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    width: 400px;
    max-width: 90%;
  }
  
  h3 {
    margin-top: 0;
    color: #2c3e50;
  }
  
  .edit-input {
    width: 94%;
    padding: 0.75rem;
    margin: 1rem 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
  }
  
  .modal-actions {
    display: flex;
    justify-content: flex-end;
  }
  
  .save-btn, .cancel-btn {
    padding: 0.5rem 1rem;
    margin-left: 0.5rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .save-btn {
    background: #42b983;
    color: white;
  }
  
  .save-btn:hover {
    background: #3aa876;
  }
  
  .cancel-btn {
    background: #f0f0f0;
  }
  
  .cancel-btn:hover {
    background: #e0e0e0;
  }
  </style>